<template>
    <div class="page-main BillQuery">
        <DataTable ref="HoisterDataTableRef" :data="list" :has-add="false" :has-filter="true" :has-checkbox="false" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" v-bind="$attrs">
            <vxe-column title="出入库单号" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.billModel?.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="出入库状态" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Enums.Bill_Status.Get(row.billModel?.status).text || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="出入库仓库" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.warehouseName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="申请人" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.billModel?.applyUserName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="申请日期" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.billModel?.billDate) || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="出入库类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.billModel?.operType_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳名称" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="规格型号" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.guiGe || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="直径" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.IsEmpty(row.diameter) ? "-" : row.diameter + " mm" }}
                </template>
            </vxe-column>

            <vxe-column title="抗拉强度" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.mpaName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="表面状态" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.surfaceStatusName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="捻制类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.twistingTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="长度" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.IsEmpty(row.lengthNum) ? "-" : row.lengthNum + " m" }}
                </template>
            </vxe-column>

            <vxe-column title="绳子条数" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.cnt || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="供应商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.supplierName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="制造商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.producerName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="矿山" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.department_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升机类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升用途" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterUsageName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.wireropeTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="备注" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.remark || "-" }}
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter>
                <el-input v-model="filterModel._Name" class="placeholder-center" placeholder="钢丝绳名称" clearable></el-input>
                <EnumSelect v-model:id="filterModel._BillStatuss" :enums="Enums.Bill_Status" placeholder="请选择出入库状态" multiple collapse-tags></EnumSelect>
                <DataSelect v-model:id="filterModel._WarehouseIDs" table="Warehouse" placeholder="请选择库仓库" multiple collapse-tags></DataSelect>
                <DataSelect v-model:id="filterModel._BillOperTypes" table="OperType" placeholder="请选择出入库类型" multiple collapse-tags></DataSelect>
            </template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn>
                <el-button-group>
                    <el-button v-if="Gx.HasPermission(30402)" type="warning" @click="onExport">导出</el-button>
                </el-button-group>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <el-form v-model="filterModel" label-position="top" @submit.prevent>
                    <el-form-item label="申请日期">
                        <el-date-picker style="width: 300px !important" v-model="BillDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="规格型号" prop="_GuiGe">
                        <el-input v-model="filterModel._GuiGe" placeholder="规格型号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="出入库单号" prop="_BillCode">
                        <el-input v-model="filterModel._BillCode" placeholder="出入库单号" clearable></el-input>
                    </el-form-item>
                </el-form>
            </template>
        </DataTable>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import LAY_EXCEL from "lay-excel";

//表格的数据
const list = ref([]);

//申请时间
const BillDate = ref<any>();

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[x].[BillDetailID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value);

    App.CallApi(Api.BillDetail.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;

    if (!Gx.IsEmpty(BillDate.value) && BillDate.value.length > 0) {
        filterModel.value._BillDate_Begin = BillDate.value[0];
        filterModel.value._BillDate_End = BillDate.value[1];
    } else {
        filterModel.value._BillDate_Begin = null;
        filterModel.value._BillDate_End = null;
    }

    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    BillDate.value = [];
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

//导出
const onExport = async () => {
    let _data = {};

    MergeObjs(_data, filterModel.value);

    let dataList;
    await App.CallApi(Api.BillDetail.GetPage(1, 9999999, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            for (var i = 0; i < res.items.length; i++) {
                res.items[i].index = i + 1;
            }

            dataList = res.items;
        },
    });

    //设置数据
    dataList = LAY_EXCEL.filterExportData(dataList, {
        index: "index",
        billCode: (value, row, data) => {
            return row.billModel?.code;
        },
        billStatus: (value, row, data) => {
            return Enums.Bill_Status.Get(row.billModel?.status).text;
        },
        warehouseName: "warehouseName",
        applyUserName: (value, row, data) => {
            return row.billModel?.applyUserName;
        },
        createDate: (value, row, data) => {
            return Gx.YMD(row.billModel?.createDate);
        },
        operType_Name: (value, row, data) => {
            return row.billModel?.operType_Name;
        },
        code: "code",
        name: "name",
        guiGe: "guiGe",
        diameter: (value, row, data) => {
            return Gx.IsEmpty(row.diameter) ? "" : row.diameter + " mm";
        },
        mpaName: "mpaName",
        surfaceStatusName: "surfaceStatusName",
        twistingTypeName: "twistingTypeName",
        lengthNum: (value, row, data) => {
            return Gx.IsEmpty(row.lengthNum) ? "" : row.lengthNum + " m";
        },
        cnt: "cnt",
        supplierName: "supplierName",
        producerName: "producerName",
        department_Name: "department_Name",
        hoisterName: "hoisterName",
        hoisterUsageName: "hoisterUsageName",
        wireropeTypeName: "wireropeTypeName",
        remark: "remark",
    });

    //设置表头
    dataList.unshift({
        index: "序号",
        billCode: "出入库单号",
        billStatus: "出入库状态",
        warehouseName: "仓库名称",
        applyUserName: "申请人",
        createDate: "申请时间",
        operType_Name: "出入库类型",
        code: "钢丝绳编码",
        name: "钢丝绳名称",
        guiGe: "规格型号",
        diameter: "直径",
        mpaName: "抗拉强度",
        surfaceStatusName: "表面状态",
        twistingTypeName: "捻制类型",
        lengthNum: "长度",
        cnt: "绳子条数",
        supplierName: "供应商",
        producerName: "制造商",
        department_Name: "矿山",
        hoisterName: "提升机类型",
        hoisterUsageName: "提升用途",
        wireropeTypeName: "钢丝绳类型",
        remark: "备注",
    });

    //设置单元格居中、边框
    let rows = "A1:W" + Number(dataList.length);
    LAY_EXCEL.setExportCellStyle(dataList, rows, {
        s: {
            alignment: {
                horizontal: "center",
                vertical: "center",
            },
            border: {
                top: { style: "thin", color: { rgb: "FF000000" } },
                bottom: { style: "thin", color: { rgb: "FF000000" } },
                left: { style: "thin", color: { rgb: "FF000000" } },
                right: { style: "thin", color: { rgb: "FF000000" } },
            },
        },
    });

    //配置列宽
    var colConf = LAY_EXCEL.makeColConfig(
        {
            A: 40,
            W: 120,
        },
        100
    );

    //导出
    LAY_EXCEL.exportExcel({ Sheet1: dataList }, `出入库查询.xlsx`, "xlsx", { extend: { "!cols": colConf } });
};
</script>
